<template>
  <div class="home-container">
    <el-container style="height: 100vh;">
      <!-- 左侧导航栏 -->
      <el-aside width="250px" class="sidebar">
        <!-- 图片logo -->
        <div class="logo-container">
          <img src="../img/b2714bae6a96bcabcadd09c259eeb3e.png" alt="logo" class="logo" />
        </div>

        <!-- 菜单部分 -->
        <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="#1e2a3a"
            text-color="#bfcbd9"
            active-text-color="#fff"
            @select="handleSelect"
            collapse-width="80px"
            unique-opened
        >
          <!-- 首页菜单 -->
          <el-menu-item index="0" @click="navigateTo('/home/home-page')">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>

          <el-menu-item index="1" @click="navigateTo('/home/store-management')">
            <i class="el-icon-house"></i>
            <span slot="title">门店管理</span>
          </el-menu-item>

          <el-menu-item index="2" @click="navigateTo('/home/tutor-management')">
            <i class="el-icon-user-solid"></i>
            <span>助教管理</span>
          </el-menu-item>

          <el-menu-item index="3" @click="navigateTo('/home/user-management')">
            <i class="el-icon-user"></i>
            <span>用户管理</span>
          </el-menu-item>

          <el-menu-item index="4" @click="navigateTo('/home/employee-management')">
            <i class="el-icon-team"></i>
            <span>内部员工管理</span>
          </el-menu-item>

          <el-menu-item index="5" @click="navigateTo('/home/activity-management')">
            <i class="el-icon-s-help"></i>
            <span>活动管理</span>
          </el-menu-item>

          <el-menu-item index="6" @click="navigateTo('/home/coupon-management')">
            <i class="el-icon-goods"></i>
            <span>优惠券管理</span>
          </el-menu-item>

          <el-menu-item index="7" @click="navigateTo('/home/about-ball-management')">
            <i class="el-icon-basketball"></i>
            <span>约球管理</span>
          </el-menu-item>

          <el-menu-item index="8" @click="navigateTo('/home/recharge-card-management')">
            <i class="el-icon-credit-card"></i>
            <span>充值卡管理</span>
          </el-menu-item>

          <el-menu-item index="9" @click="navigateTo('/home/order-management')">
            <i class="el-icon-shopping-cart-full"></i>
            <span>订单管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <!-- 右侧主内容区 -->
      <el-main class="main-content">
        <router-view></router-view>  <!-- 动态渲染当前页面 -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(index) {
      console.log(`选择了 ${index} 项`);
    },
    navigateTo(path) {
      this.$router.push(path); // 路由跳转
    },
  },
};
</script>

<style scoped>
.home-container {
  display: flex;
  height: 100vh;
  background-color: #f5f7fa;
}

.sidebar {
  background-color: #1e2a3a; /* 改为深色主题 */
  color: #fff;
  border-right: 1px solid #34495e;
  box-shadow: 2px 0px 8px rgba(0, 0, 0, 0.1);
}

.sidebar .el-header {
  background-color: #1e2a3a; /* 与侧边栏背景一致 */
  padding: 20px;
  display: flex;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logo {
  width: 80%; /* 自适应Logo宽度 */
  height: auto;
  transition: transform 0.3s ease-in-out;
}

.logo-container:hover .logo {
  transform: scale(1.05); /* 鼠标悬停时Logo放大 */
}

.main-content {
  padding: 20px;
  background-color: #ffffff;
  flex: 1;
  overflow: auto;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}

.el-menu-vertical-demo {
  background-color: #1e2a3a;
}

.el-menu-item,
.el-submenu {
  transition: background-color 0.3s, color 0.3s;
}

.el-menu-item:hover,
.el-submenu:hover {
  background-color: #1abc9c; /* 菜单项悬停效果 */
}

.el-menu-item .el-icon {
  margin-right: 10px;
  transition: color 0.3s;
}

.el-menu-item:hover .el-icon,
.el-menu-item.is-active .el-icon {
  color: #fff;
}

.el-menu-item span {
  font-size: 16px;
  font-weight: bold;
}

.el-menu-item {
  padding: 15px 20px; /* 增加上下间距，视觉效果更好 */
  border-radius: 5px; /* 圆角效果 */
}

.el-submenu .el-menu-item {
  padding-left: 30px;
}

.el-menu {
  padding-top: 20px;
}

.el-menu-item.is-active {
  background-color: #1abc9c; /* 高亮选中项的颜色 */
  border-radius: 5px;
}

.el-menu-item.is-active span,
.el-menu-item.is-active .el-icon {
  color: #fff;
}
</style>
